<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Information</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link th:href="@{css/bootstrap.css}" type="text/css" rel="stylesheet" media="all">
    <link th:href="@{css/style.css}" type="text/css" rel="stylesheet" media="all">
    <script th:src="@{js/jquery-3.4.1.js}"></script>
    <link th:href='@{fonts/Aladin-Fonts.css}' rel='stylesheet' type='text/css'/>
    <link th:href="@{css/animate.css}" rel="stylesheet" type="text/css" media="all">
    <link rel="stylesheet" th:href="@{css/element.css}">
    <script th:src="@{js/vue.js}"></script>
    <script th:src="@{js/element.js}"></script>
    <script th:src="@{js/axios.js}"></script>
    <script th:src="@{js/dataParse.js}"></script>
    <script th:src="@{js/bootstrap.js}"></script>
    <style>
    </style>
</head>
<body>
<!--banner-->
<div class="banner about-bnr">
    <div class="bnr-img">
        <img class="wow fadeInLeftBig animated" data-wow-delay=".5s" src="images/a.png" alt=""/>
    </div>
    <div th:replace="top-list.html"></div>
    <div class="banner-text">
        <h1 class="wow fadeInDown animated" data-wow-delay=".5s"><a th:href="@{index}">POI - Coffee </a></h1>
        <h2 class="wow fadeInUp animated" data-wow-delay=".5s"><a th:href="@{index}">主页</a> / 我的信息</h2>
    </div>
    <div class="clearfix"></div>
</div>
<!--//banner-->
<!-- gallery -->
<div id="app" style="margin-bottom: 50px">
    <div class="container" style="margin-top: 20px; position: relative;">
        <h4 class="title">INFORMATION</h4>
        <h3 class="title1">START <span>YOUR</span>COFFEE JOURNEY</h3>
        <ul class="nav nav-tabs nav-justified">
            <li role="presentation" class="active"><a href="#information" role="tab" data-toggle="tab">我的信息</a></li>
            <li role="presentation"><a href="#modifyInformation" role="tab" data-toggle="tab">修改信息</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="information">
                <div class="input-group input-group-lg wow fadeInDown animated" data-wow-delay=".5s">
                    <span class="input-group-addon" id="basic-addon1">用户名：</span>
                    <input type="text" class="form-control"
                           aria-describedby="basic-addon1" disabled="disabled" :value="uName">
                </div>
                <div class="input-group input-group-lg wow fadeInDown animated" data-wow-delay=".5s">
                    <span class="input-group-addon" id="basic-addon2">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</span>
                    <input type="email" class="form-control"
                           aria-describedby="basic-addon1" disabled="disabled" :value="uEmail">
                </div>
                <div class="input-group input-group-lg wow fadeInDown animated" data-wow-delay=".5s">
                    <span class="input-group-addon" id="basic-addon3">手机号：</span>
                    <input type="button" class="btn btn-default btn-lg btn-block"
                           aria-describedby="basic-addon1" value="请绑定手机号" v-show="uPhone == null || uPhone == '' "
                           @click="dialogFormVisible = true">
                    <input type="tel" class="form-control"
                           aria-describedby="basic-addon1" disabled="disabled" v-show="uPhone != null && uPhone != '' "
                           :value="uPhone">
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="modifyInformation">
                <div class="input-group input-group-lg wow fadeInDown animated" data-wow-delay=".5s">
                    <span class="input-group-addon" id="basic-addon4">用户名：</span>
                    <input type="text" class="form-control"
                           aria-describedby="basic-addon1" v-model="nUName">
                </div>
                <div class="input-group input-group-lg wow fadeInDown animated" data-wow-delay=".5s">
                    <span class="input-group-addon" id="basic-addon5">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</span>
                    <input type="email" class="form-control"
                           aria-describedby="basic-addon1" v-model="nUEmail">
                </div>
                <div class="input-group input-group-lg wow fadeInDown animated" data-wow-delay=".5s">
                    <span class="input-group-addon" id="basic-addon6">手机号：</span>
                    <input type="button" class="btn btn-default btn-lg btn-block"
                           aria-describedby="basic-addon1" value="请绑定手机号" v-show="!showPhone()"
                           @click="dialogFormVisible = true">
                    <input type="tel" class="form-control"
                           aria-describedby="basic-addon1" v-show="showPhone()"
                           @input="inputChange()" v-model="nUPhone">
                </div>
                <div style="height: 30px; position: relative;">
                    <div style="position: absolute; left:42.5%;margin-top: 10px">
                        <el-popover
                                placement="top"
                                width="160"
                                v-model="visible">
                            <p>是否修改信息?</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="updateInformation()">确定</el-button>
                            </div>
                            <el-button slot="reference">修改信息</el-button>
                        </el-popover>
                        <el-popover
                                placement="top"
                                width="160"
                                v-model="visible1">
                            <p>是否修改密码?</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="visible1 = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="updatePasswordPopover()">确定</el-button>
                            </div>
                            <el-button slot="reference">修改密码</el-button>
                        </el-popover>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <el-dialog title="绑定手机号" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="手机号码：" :label-width="formLabelWidth">
                <el-input v-model="nUPhone" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="bindingPhone()">确 定</el-button>
        </div>
        <el-dialog
                width="30%"
                title="绑定手机号码失败"
                :visible.sync="innerVisible"
                append-to-body>
            该手机号已被绑定或手机号输入错误，请重新输入。
        </el-dialog>
    </el-dialog>

    <el-dialog title="重置密码" :visible.sync="dialogFormVisible1">
        <el-form :model="form1">
            <el-form-item label="新密码" :label-width="formLabelWidth">
                <el-input type="password" autocomplete="off" v-model="nUPwd"
                          placeholder="UserPassWord:数字、字母、符号至少包含两种,长度为8-16位"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth">
                <el-input type="password" autocomplete="off" placeholder="请再次输入密码" v-model="aNUPwd"></el-input>
            </el-form-item>
        </el-form>
        <el-dialog
                width="30%"
                title="密码设置错误"
                :visible.sync="innerVisible1"
                append-to-body>
            请检查两次输入的密码是否一致或密码格式是否正确。
        </el-dialog>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="updateInformationForPassword()">确 定</el-button>
        </div>
    </el-dialog>

</div>
<div th:replace="fotter-all.html"></div>
</body>
<script th:src="@{js/information.js}"></script>
</html>
